Vue.component("aui-loadding-spinner", {
    template: `
        <div class="aui-loader">           
            <div class="aui-loader__title"><slot>loading</slot></div>
            <canvas class="aui-loader__canvas" width="50" height="50" ref="canvas"></canvas>
        </div>
    `,
    mounted() {
        var self = this;
        var circles = [];
        var i = 0;
        var canvas = self.$refs.canvas;
        var context = canvas.getContext("2d");

        function drawTicker() {
            var radius = 2.9;
            var pathradius = 21;
            var y = Math.sin(i/10 - Math.PI/2) * pathradius;
            var x = Math.cos(i/10 - Math.PI/2) * pathradius;

            if (i % 3 == 0) {
                circles.push([x, y, i]);
            }


            context.clearRect(0, 0, 50, 50);
            context.save();
            context.translate(25, 25);
            context.beginPath();
            context.arc(x, y, radius, 0, 2 * Math.PI, false);
            context.fillStyle = '#EEEEEE';
            context.fill();
            context.restore();

            i++;

            drawCircles(i);
            requestAnimationFrame(drawTicker);
        }

        function drawCircles(currentTime) {
            for (var i = 0; i < circles.length; i++) {
                drawCircle(circles[i][0], circles[i][1], circles[i][2], currentTime);
                if (currentTime - circles[i][2] >= 100) {
                    circles.shift();
                }
            }
        }

        function drawCircle(x, y, makeTime, currentTime) {
            var opacity = 1 - ((currentTime - makeTime) / 100);
            context.save();
            context.translate(25, 25);
            context.beginPath();
            context.arc(x, y, 2.1, 0, 2 * Math.PI, false);
            context.fillStyle = 'rgba(35, 183, 229, ' + opacity + ')';
            context.fill();
            context.restore();
        }

        requestAnimationFrame(drawTicker);
    }
});